<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--360浏览器优先以webkit内核解析-->
	<title>若依介绍</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
	<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div style="float:left;margin-top: 15px;margin-left: 16px;">
	<div id="chart" style="width:350px;height:300px;margin-top: 32px" ></div>
	<div id="chart2" style="width:350px;height:300px;margin-top: 70px"></div>
</div>

<div id="" class="card-body" style="width:65%;height:800px;float: right;margin-top: 10px;margin-right: 0px">
	<div style="margin: 0px auto; float:  right" >
		<button type="button" class="btn btn-w-m btn-warning">僵尸卡</button>
		<button type="button" class="btn btn-w-m btn-warning">无主卡</button>
		<button type="button" class="btn btn-w-m btn-warning">超流量</button>
		<button type="button" class="btn btn-w-m btn-warning">零流量</button>
	</div>
	<div id="main" class="" style="width:900px;height:750px;margin-left: 5px;"></div>
</div>
</body>
<script type="text/javascript">
	// 初始化图表标签
	var myChart = echarts.init(document.getElementById('chart'));
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			orient: 'horizontal',
			left: 10,
			y:'bottom',
			data: ['销售部', '后勤部', '物资部', '运检部', '未知']
		},
		series: [
			{
				name: '访问来源',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '30',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{value: 335, name: '销售部'},
					{value: 310, name: '后勤部'},
					{value: 234, name: '物资部'},
					{value: 135, name: '运检部'},
					{value: 1548, name: '未知'}
				]
			}
		]
	};
	myChart.setOption(option);

	// 初始化图表标签
	var myChart2 = echarts.init(document.getElementById('chart2'));
	var option2 = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			orient: 'horizontal',
			left: 10,
			y:'bottom',
			data: ['朝阳', '大兴', '平谷', '怀柔', '密云','顺义','延庆']
		},
		series: [
			{
				name: '访问来源',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '30',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{value: 335, name: '朝阳'},
					{value: 310, name: '大兴'},
					{value: 234, name: '平谷'},
					{value: 135, name: '怀柔'},
					{value: 234, name: '密云'},
					{value: 135, name: '顺义'},
					{value: 1548, name: '延庆'}
				]
			}
		]
	};
	myChart2.setOption(option2);
</script>

<script type="text/javascript">
	$.get('/data/beijing.json',function(geoJson){
		echarts.registerMap('beijing',geoJson,{});
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			title: {
				text: '2020年',
				textStyle:{color:'#ffffff'}
			},
			tooltip: {
				trigger: 'item',
				formatter: '1000<br/> (人)'
			},
			visualMap: {
				textStyle:{color:'black',fontWeight: 'bolder'},
				min: 0,
				max: 2000,
				text:['High','Low'],
				visible:false,
				realtime: false,
				calculable: true,
				inRange: {
					color: ['lightskyblue','yellow', 'orangered']
				}
			},
			series: [
				{
					name: '北京十六区',
					type: 'map',
					mapType:'beijing',
					zoom: 0.9,
					coordinateSystem: 'geo',
					bottom:0,
					top:20,
					aspectScale: 0.75,  //地图长度比
					label: {
						show: true
					},
					data: [
						{name:'城区', value:1700},
						{name:'朝阳', value:1600},
						{name:'丰台', value:1400},
						{name:'石景山', value:1200},
						{name:'海淀', value:1000},
						{name:'门头沟', value:800},
						{name:'房山', value:600},
						{name:'通州', value:400},
						{name:'顺义', value:200},
						{name:'昌平', value:100},
						{name:'大兴', value:300},
						{name:'怀柔', value:500},
						{name:'平谷', value:700},
						{name:'密云', value:900},
						{name:'延庆', value:1100}
					],

					itemStyle: {
						normal:{
							label: {
								show: true
							},
							borderColor: '#6C6C6C',
							areaColor: 'lightskyblue',
						},
						emphasis:{
							label: {
								show: true
							},
							areaColor: null,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							shadowBlur: 20,
							borderWidth: 0,
							shadowColor: '#DC143C',
							areaColor: '#DC143C'
						}
					}
				}
			],
			// geo: {
			// 	map: 'beijing',
			// 	roam: true,
			// 	label: {
			// 		normal: {
			// 			show: true,
			// 			textStyle: {
			// 				color: 'black'
			// 			}
			// 		}
			// 	},
			//
			// },

		};

		myChart.setOption(option);
	});
</script>
</html>
